<!-- 投稿 && 发布-->
<template>
	<div class="submit-contribute-panel">
		<nav-bar :back="1" :title="title"></nav-bar>

		<van-form @submit="onSubmit" enctype="multipart/form-data">
			<div class="submit-contribute">
				<van-field v-model="contribute.title" name="title" type="text" label-width="0" placeholder="请输入您发布作品的标题"
					:rules="[{ required: true, message: '' }]" maxlength="30">
				</van-field>

				<div class="inputcontent" ref="inputcontent">
					<van-field v-model="contribute.content" name="content" label-width="0" placeholder="请输入具体内容...."
						:rules="[{ required: true, message: '' }]" :autosize="autosize" type="textarea"
						show-word-limit>
					</van-field>
				</div>
				<van-field v-model="contribute.LinkUrl" name="LinkUrl" type="text" label-width="0" placeholder="请输入您想设置的作品链接"
					 maxlength="30">
				</van-field>
				<div class="add-file-box">
					<div v-if="isUpFile" class="add-file">
						<div class="add-file-iocn">
							<van-image width="100%" height="100%" :src="fileInfo.icon"></van-image>
						</div>
						<div class="add-file-info">
							<div class="add-file-name limit-one-line">
								{{ fileInfo.name }}
							</div>
							<div class="add-file-type limit-one-line">
								格式：{{ fileInfo.type }} &nbsp; 上传时间：{{
									fileInfo.time
								}}
							</div>
						</div>
					</div>
					<van-uploader :after-read="addFile" :accept="accept">
						<van-image width="100%" height="0.8rem"
							:src="require('../../assets/imgs/add-contribute-file.png')">
						</van-image>
					</van-uploader>
					<div class="add-file-hint">
						传附件只可以上传：DOC、DOCX、PPT、MP4视频、MP3音频格式，大小限制在20M之内
					</div>
				</div>
			</div>
			<div class="submit-contribute-box">
				<button class="btn main-btn submit-contribute-btn" round block type="info" native-type="submit">
					{{type == 0 ? '确认投稿' : '确认发布'}}
				</button>
			</div>
		</van-form>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'

	import NavBar from '../../components/NavBar.vue'

	import {
		contribute_api,
		uploadVideo,
		learn_api,
	} from '../../api/index.js'

	export default {
		name: 'submit-contribute',
		components: {
			NavBar,
		},
		data() {
			return {
				autosize: {
					maxHeight: 100,
					minHeight: 100,
				},
				accept: '.doc,.docx,audio/mpeg,video/mp4,application/vnd.ms-powerpoint,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword',
				//accept: 'video/mp4,application/msword,application/vnd.ms-powerpoint,audio/mpeg,',
				// 'image/jpeg, image/png, video/mp4, audio/mpeg, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document',
				fileComparison: [{
						icon: require('../../assets/imgs/accessory-file.png'),
						type: ['pdf', 'doc', 'docx', 'jpeg', 'png'],
					},
					{
						icon: require('../../assets/imgs/accessory-audio.png'),
						type: ['mp3'],
					},
					{
						icon: require('../../assets/imgs/accessory-video.png'),
						type: ['mp4'],
					},
				],
				bese64: [
					{
						name: 'pdf',
						base64: 'application/pdf',
					},
					{
						name: 'mp4',
						base64: 'video/mp4',
					},
					{
						name: 'doc',
						base64: 'application/msword',
					},
					{
						name: 'docx',
						base64: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
					},
					{
						name: 'docx',
						base64: 'docx',
					},
					{
						name: 'doc',
						base64: 'doc',
					},
					{
						name: 'doc',
						base64: '',
					},
					{
						name: 'mp3',
						base64: 'audio/mpeg',
					},
					{
						name: 'ppt',
						base64: 'audio/mpeg',
					},
					{
						name: 'jpeg',
						base64: 'image/jpeg',
					},
					{
						name: 'png',
						base64: 'image/png',
					},
				],
				contribute: {
					title: '',
					content: '',
				},
				isUpFile: false,
				fileInfo: {
					Id: 0,
					name: '',
					type: '',
					size: '',
					time: '',
					icon: '',
				},
				id: 0,
				file: null,
			}
		},
		activated() {
			console.log('123')
			this.init()
		},
		mounted() {
			this.autosize = {
				maxHeight: this.$refs.inputcontent.offsetWidth - 150,
				minHeight: this.$refs.inputcontent.offsetWidth - 150,
			}
		},
		methods: {
			init() {
				//getWorksShareInfo
				this.id = this.$route.query.id || 0;
				if(this.id ===0) {
					this.contribute = {
						title: '',
						content: '',
					};
					this.isUpFile = false;
					this.fileInfo = {
						Id: 0,
						name: '',
						type: '',
						size: '',
						time: '',
						icon: '',
					};
					this.file = null;
				} else {
					contribute_api.getWorksShareInfo({Id: this.id}, (res) => {
						console.log('res', res)
						this.contribute = {
							title: res.Title,
							content: res.Remark,
						};
						if (res.AttaList.length >0) {
							this.isUpFile = true;
							let icon = this.getFileIcon(res.AttaList[0].AttaName.split('.')[1])[0].icon || this.fileComparison[0].icon;
						// let icon = this.getFileIcon(res.file.name.split('.')[0]);
							this.fileInfo = {
								Id: res.AttaList[0].Id,
								name: res.AttaList[0].AttaName,
								type: res.AttaList[0].AttaType ==1 ? 'mp4' : res.AttaList[0].AttaType ==1 ? 'mp3' : '',
								size: res.AttaList[0].AttaSize,
								time: res.AddTime,
								icon: icon,
								link: res.AttaList[0].AttaUrl,
							};
							console.log(this.fileInfo)
						}
					})
				}
			},
			onSubmit(value) {
				console.log('submit', value)
				let formData = new FormData()
				formData.append('file', this.file)
				if (this.file) {
					uploadVideo(formData, (res) => {
						console.log(res.url)
						let data = {
							Title: value.title,
							Id: this.id,
							PicUrl: '',
							Remark: value.content,
							LinkUrl: value.LinkUrl,
							AttaList: [{
								Id: this.fileInfo.Id,
								AttaName: this.fileInfo.name,
								AttaUrl: res.url,
								AttaDesc: "",//this.fileInfo.type,
								AttaSize: this.fileInfo.size,
								AttaType: this.fileInfo.type == 'mp4' ?
									1 : this.fileInfo.type == 'mp3' ?
									2 : 0,
								SortNum: '',
							}, ],
						}
						learn_api.saveStudyworksInfo(data, (res) => {
							console.log(res)
							Toast('保存成功')
							setTimeout(() => {
								this.$router.back()
							}, 1000)
						})
					})
				} else {
					let data = {
							Title: value.title,
							Id: this.id,
							PicUrl: '',
							Remark: value.content,
							LinkUrl: value.LinkUrl,
							AttaList: this.fileInfo.link ? [{
								Id: this.fileInfo.Id,
								AttaName: this.fileInfo.name,
								AttaUrl: this.fileInfo.link,
								AttaDesc: "",//this.fileInfo.type,
								AttaSize: this.fileInfo.size,
								AttaType: this.fileInfo.type == 'mp4' ?
									1 : this.fileInfo.type == 'mp3' ?
									2 : 0,
								SortNum: '',
							}] : []
						}
						contribute_api.saveWorksShareInfo(data, (res) => {
							console.log(res)
							Toast('发布成功')
							setTimeout(() => {
								this.$router.back()
							}, 1000)
						})
				}
			
			},
			addFile(res) {
				console.log('addFile', res)
				if (res != null) {
					let size = res.file.size //字节数
					if (size > 20 * 1024 * 1024) {
						Toast('文件大于20M')
						return
					}
					let type = this.checkFileType(res.file.type) //文件类型
					// if (type.length < 1) {
					// 	Toast('文件格式不正确')
					// 	return
					// }
					let icon =
						this.getFileIcon(res.file.name.split('.')[1])[0].icon || this.fileComparison[0].icon
					this.fileInfo = {
						name: res.file.name,
						size: size,
						type: res.file.name.split('.')[1],
						time: this.getData(),
						icon: icon,
					}

					this.isUpFile = true
					this.file = res.file
				}
			},
			getFileIcon(name) {
				return this.fileComparison.filter((vaule) => {
					let checkname = vaule.type.filter((type) => {
						return type == name ? true : false
					})
					return checkname.length > 0 ? true : false
				})
			},
			getData() {
				let Data = new Date()
				let yy = Data.getFullYear()
				let mm = Data.getMonth() + 1
				let dd = Data.getDate()
				let hh = Data.getHours()
				let mf =
					Data.getMinutes() < 10 ? '0' + Data.getMinutes() : Data.getMinutes()
				let ss =
					Data.getSeconds() < 10 ? '0' + Data.getSeconds() : Data.getSeconds()
				return yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
			},
			checkFileType(type) {
				return this.bese64.filter((vaule) => {
					return vaule.base64 == type ? true : false
				})
			},
		},
		computed: {
			title() {
				return this.type == 0 ? '投稿' : '发布作品'
			},
			type() {
				if (this.$route.params.type) {
					return this.$route.params.type
				} else if (window.localStorage.getItem('params')) {
					return JSON.parse(window.localStorage.getItem('params')).type
				} else {
					return 0 //0-投稿， 1-作品
				}
			}
		}
	}
</script>

<style scoped>
	.submit-contribute-panel {
		width: 100%;
		height: 100%;
		padding-top: 0.88rem;
		background: #ffffff;
	}

	.submit-contribute {
		min-height: calc(100vh - 2.6rem);
		padding: 1rem 0.2rem 1.6rem;
		position: relative;
	}

	.van-cell::after {
		border-bottom: 1px solid #e0e0e0;
	}

	.van-field--min-height::after {
		display: none;
	}

	.inputcontent {
		margin: 0.44rem 16px 0;
		border: 1px dashed #e0e0e0;
	}

	.add-file-box {
		margin: 0.44rem 16px 0;
	}

	.add-file {
		height: 1.12rem;
		background: #f8f8f8;
		border-radius: 0.1rem;
		display: flex;
		align-items: center;
		padding: 0.18rem 0.24rem;
		margin-bottom: 0.3rem;
	}

	.add-file-iocn {
		width: 0.6rem;
		min-width: 0.6rem;
		height: 0.6rem;
		margin: 0 0.2rem 0 0;
	}

	.add-file-info {
		width: calc(100% - 0.6rem);
	}

	.add-file-name {
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.4rem;
		margin-bottom: 0.08rem;
	}

	.add-file-type {
		height: 0.28rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #a3a3a3;
		line-height: 0.28rem;
	}

	.add-file-hint {
		margin-top: 0.3rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #a3a3a3;
		line-height: 0.34rem;
	}

	.submit-contribute-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;

		padding-bottom: constant(safe-area-inset-bottom);
	}

	.submit-contribute-btn {
		margin-bottom: 0.4rem;
	}
</style>
